<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
		<style>
				.father{
					position: fixed;
					margin: auto;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 50%;
					height: 50%;
					border: 1px solid;
					background: #D3D3D3;
					display: flex;
					justify-content:space-around;
					align-items: center;
				}
				.father > div:nth-child(1){
					width: 25%;
					height: 25%;
					border:1px  #FFE4C4;
					background: #FFE4C4;
					display: flex;
					align-items: center;
					justify-content: center;
					
				}
				.father > div:nth-child(1)>span{
					background-color: #4158D0;
					background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
				}
				.father > div:nth-child(2){
					width: 25%;
					height: 25%;
					border:1px  #FFFF00;
					background: #FFFF00;
					position: relative;
					text-align: center;
					text-line: center;
				}
				.father>div:nth-of-type(2)>div{
					width: 15%;
					height: 15%;
					background: darkmagenta;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					position: absolute;
					margin: auto;
					opacity: 0.6;
				}
		</style>
	</head>
	<body>
		<div class="father">
			<div >
				<span>
					子元素
				</span>
			</div>
			<div>
				兄弟
				<div>
				</div>
			</div>
		</div>
	</body>
</html>
